<template>
  <div class="content" v-if="props.content" v-html="md.render(props.content)"></div>
</template>
<script setup lang="ts">
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
const props = defineProps<{ content: string | undefined }>()
let md: any = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  breaks: true,
  highlight: function (str: any, lang: any) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return `<pre><code class="language-${lang} hljs">` +
          hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
          '</code></pre>';
      } catch (__) { }
    }
    return '<pre><code class="language-none hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
  }
}) 
</script>
<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
}

code {
  border-radius: 8px;
}
</style>